<template>
 <div>
 <!--展示当前时间 地点 天气-->
<el-card  style = "width:600px">
<p>今天是 {{NowDate}}</p>
<div>
您现在处于{{Province}} {{City}}
{{CityWeatherInfo.high}}
{{CityWeatherInfo.low}}
{{CityWeatherInfo.fengxiang}}
{{CityWeatherInfo.type}}

</div>
</el-card>


<!--展示服务列表-->
<el-card style = "width:600px">
<el-table :data="requestloglist" border style="width: 410px">
<el-table-column type="index"> 
</el-table-column>
<el-table-column prop="name" label="服务名称" width="180">
</el-table-column>
<el-table-column prop="count" label="调用次数" width="180">
</el-table-column>
</el-table>







</el-card>
<!--展示公告 v-for遍历   -->
<el-card   style = "width:600px">
<el-collapse accordion>
  <el-collapse-item  v-for="(val,key) in Noticeform"    :title="val.title" :name="val.id" :key="val.id">
    <div> {{ val.content }}  </div>
  </el-collapse-item>
  
</el-collapse>
<!-- 这里应该加个分页插件 一页5个--> 
<el-pagination
  small
  layout="total,prev, pager, next"
  :total="total" 
  style = "float:right"
  :page-size="4"
  @current-change="handleCurrentChange">
</el-pagination>
</el-card>
 </div>
</template>

<script>
import BMap from '@/Bmap/Bmap.js'
//对外暴露接口
 export default {
name:'welcome', 
   data () {
     return {
       NowDate:" ",
       Province:"未知",    //给渲染层定义一个初始值
       City:"未知",
       //公告用数据列表
       Noticeform:[
         { 
           id:1,
           title:"还不存在公告哦",
           content:"这是公告内容"
         },
        

       ],
       total:4,
       index:"",
       CityWeatherInfo:{
         high:"未获取到高温值",
         low:"未获取到低温值",
         fengxiang:"未获取到风力",
         type:"未获取到天气",

     },
     datevalue: new Date(),
     requestloglist:[
       {
         name: "当前不存在服务",
         count:"0"
       }
     ]

     }
   },
   components: {

   },
   created(){  
    
       

   },
   mounted() {
      this.GetInFo()
      this.GetNoticeByPage(1,4)
      this.GetLog()
   },

   methods: {
     //动态获取当前时间
     GetInFo(){
       var MyDate = new Date();
       this.NowDate = MyDate.toLocaleDateString()+"    星期"+MyDate.getDay()
       this.GetCity()
     },
      GetCity(){
          let that = this
          BMap.init().then(BMap=>{
          const geolocation = new BMap.Geolocation()
          geolocation.getCurrentPosition((position)=>{
            let city = position.address.city;             //获取城市信息
            let province = position.address.province;     //获取省份信息
            that.City = city
            that.Province = province
            that.GetWeatherInfo()
          },(e)=>{
            console.log(e)
            console.log('定位失败')
          }, {provider: 'baidu'})
        });
        
      },
      GetNoticeByPage(pagenum,count){

        //后端发信
        let that = this
        let url = "api/GetNoticeByPage"
        let data={
           pagenum:pagenum,
           count:count,
        }
        this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.Noticeform = data.data;
         that.total = data.total
        } else {
          that.$message.error(message);
        }
      });


      },
      //分页插件触发函数
      handleCurrentChange(pagenum){
        this.GetNoticeByPage(pagenum,4);
      },
      //获取天气信息
      GetWeatherInfo(){
        var that =this; //this指向改变
           this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +this.City).then(function(response){
             console.log(response.data.data.forecast)
             that.CityWeatherInfo = response.data.data.forecast[0]
           },function(err){})


      },
      GetLog(){
        var that =this; 
        let url = "api/GetAllCount"
        let data = {}
        this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.requestloglist = data;
        
        } else {
          that.$message.error(message);
        }
      });
      
    
     }

    
     },
     
    
   }
 
</script>

<style scoped>

 
</style>
